<!-- 首页主体-人气推荐, 在 home 里面用的 -->
<script setup lang="ts">
// HomePanel组件提供,提供了两个插槽
// 1. 上面的titile 具名插槽 #right
// 2. 下的循环体 默认插槽
import HomePanel from './HomePanel.vue'
import useStore from '@/store'
// 工具函数做懒加载的
import { useLazyData } from '@/utils/hooks'
const { home } = useStore()
// 数据懒加载
const target = useLazyData(home.getHotList)

// // 获取新鲜好物数据
// home.getHotList()
</script>

<template>
    <div ref="target">
        <HomePanel title="人气推荐" subTitle="人气爆款 不容错过">
            <!-- 面板内容-------循环体----------开始---------- -->
            <Transition name="fade">
                <ul class="goods-list" v-if="home.hotGoodList.length > 0">
                    <li v-for="item in home.hotGoodList" :key="item.id">
                        <RouterLink to="/">
                            <img v-lazy="item.picture" alt="" />
                            <p>{{ item.title }}</p>
                            <p class="desc">{{ item.alt }}</p>
                        </RouterLink>
                    </li>
                </ul>
                <!-- 骨架层-----覆盖在ul上的 ---开始-->
                <div class="home-skeleton" v-else>
                    <div class="item" v-for="i in 4" :key="i" :style="{ backgroundColor: '#f0f9f4' }">
                        <XtxSkeleton bg="#e4e4e4" :width="306" :height="306" animated fade />
                        <XtxSkeleton bg="#e4e4e4" :width="160" :height="24" animated fade />
                        <XtxSkeleton bg="#e4e4e4" :width="120" :height="24" animated fade />
                    </div>
                </div>
            </Transition>
            <!-- 骨架层-----覆盖在ul上的 ---结束-->
            <!-- 面板内容-------循环体----------结束---------- -->
        </HomePanel>
    </div>
</template>

<style scoped lang="less">
.goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;

    li {
        width: 306px;
        height: 406px;
        background: #fff;
        .hoverShadow();

        img {
            width: 306px;
            height: 306px;
        }

        p {
            font-size: 22px;
            padding: 12px 30px 0 30px;
            text-align: center;
        }

        .desc {
            color: #999;
            font-size: 18px;
        }
    }
}

.home-skeleton {
    width: 1240px;
    height: 406px;
    display: flex;
    justify-content: space-between;

    .item {
        width: 306px;

        .xtx-skeleton~.xtx-skeleton {
            display: block;
            margin: 16px auto 0;
        }
    }
}

// 离开淡出动画
.fade {
    &-leave-from {
        opacity: 1;
    }

    &-leave-active {
        position: absolute;
        width: 100%;
        transition: opacity 2.6s;
        z-index: 1;
    }

    &-leave-to {
        opacity: 0;
    }
}
</style>